<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />


<meta name="author" content="Yiying Wang" />

<meta name="date" content="2017-03-15" />

<title>Widget 33 - Theme</title>

<script src="libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap-3.3.5/css/cosmo.min.css" rel="stylesheet" />
<script src="libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="libs/navigation-1.1/tabsets.js"></script>
<script src="libs/htmlwidgets-0.8/htmlwidgets.js"></script>
<script src="libs/echarts-2.2.7/echarts-all.js"></script>
<script src="libs/charts-ext-2.2.7/main.js"></script>
<script src="libs/charts-ext-2.2.7/BMap.js"></script>
<script src="libs/echarts-binding-0.2/echarts.js"></script>


<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>


<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>

<link rel="stylesheet" href="/home/madlogos/R/x86_64-pc-linux-gnu-library/3.3/knitr/misc/vignette.css" type="text/css" />

</head>

<body>

<style type = "text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
  height: auto;
}
.tabbed-pane {
  padding-top: 12px;
}
button.code-folding-btn:focus {
  outline: none;
}
</style>



<div class="container-fluid main-container">

<!-- tabsets -->
<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});
</script>

<!-- code folding -->






<div class="fluid-row" id="header">



<h1 class="title toc-ignore">Widget 33 - Theme</h1>
<h4 class="author"><em>Yiying Wang</em></h4>
<h4 class="date"><em>2017-03-15</em></h4>

</div>

<div id="TOC">
<ul>
<li><a href="#introduction"><span class="toc-section-number">1</span> Introduction</a></li>
<li><a href="#function-call"><span class="toc-section-number">2</span> Function Call</a><ul>
<li><a href="#user-defined-theme-udt"><span class="toc-section-number">2.1</span> User-defined Theme (UDT)</a></li>
</ul></li>
<li><a href="#showcase"><span class="toc-section-number">3</span> Showcase</a><ul>
<li><a href="#pre-installed-themes"><span class="toc-section-number">3.1</span> Pre-installed Themes</a><ul>
<li><a href="#default"><span class="toc-section-number">3.1.1</span> default</a></li>
<li><a href="#macarons"><span class="toc-section-number">3.1.2</span> macarons</a></li>
<li><a href="#infographic"><span class="toc-section-number">3.1.3</span> infographic</a></li>
<li><a href="#blue"><span class="toc-section-number">3.1.4</span> blue</a></li>
<li><a href="#dark"><span class="toc-section-number">3.1.5</span> dark</a></li>
<li><a href="#gray"><span class="toc-section-number">3.1.6</span> gray</a></li>
<li><a href="#green"><span class="toc-section-number">3.1.7</span> green</a></li>
<li><a href="#helianthus"><span class="toc-section-number">3.1.8</span> helianthus</a></li>
<li><a href="#macarons2"><span class="toc-section-number">3.1.9</span> macarons2</a></li>
<li><a href="#mint"><span class="toc-section-number">3.1.10</span> mint</a></li>
<li><a href="#red"><span class="toc-section-number">3.1.11</span> red</a></li>
<li><a href="#roma"><span class="toc-section-number">3.1.12</span> roma</a></li>
<li><a href="#sakura"><span class="toc-section-number">3.1.13</span> sakura</a></li>
<li><a href="#shine"><span class="toc-section-number">3.1.14</span> shine</a></li>
<li><a href="#vintage"><span class="toc-section-number">3.1.15</span> vintage</a></li>
</ul></li>
<li><a href="#user-defined-theme"><span class="toc-section-number">3.2</span> User-defined Theme</a></li>
<li><a href="#palette"><span class="toc-section-number">3.3</span> Palette</a><ul>
<li><a href="#theme-palettes"><span class="toc-section-number">3.3.1</span> Theme Palettes</a></li>
<li><a href="#rcolorbrewer-palettes"><span class="toc-section-number">3.3.2</span> <code>RColorBrewer</code> Palettes</a></li>
<li><a href="#ggthemes-palettes"><span class="toc-section-number">3.3.3</span> <code>ggthemes</code> Palettes</a></li>
<li><a href="#other-palettes"><span class="toc-section-number">3.3.4</span> Other Palettes</a></li>
<li><a href="#user-defined-palettes"><span class="toc-section-number">3.3.5</span> User-defined Palettes</a></li>
</ul></li>
<li><a href="#other-aesthetics"><span class="toc-section-number">3.4</span> Other Aesthetics</a><ul>
<li><a href="#bgcolor"><span class="toc-section-number">3.4.1</span> <code>bgColor</code></a></li>
<li><a href="#renderasimage"><span class="toc-section-number">3.4.2</span> <code>renderAsImage</code></a></li>
<li><a href="#calculable"><span class="toc-section-number">3.4.3</span> <code>calculable</code></a></li>
<li><a href="#animation"><span class="toc-section-number">3.4.4</span> <code>animation</code></a></li>
<li><a href="#width-and-height"><span class="toc-section-number">3.4.5</span> <code>width</code> And <code>height</code></a></li>
</ul></li>
</ul></li>
<li><a href="#references"><span class="toc-section-number">4</span> References</a></li>
</ul>
</div>

<p>First, you should load <code>recharts</code>:</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(recharts)</code></pre></div>
<div id="introduction" class="section level1">
<h1><span class="header-section-number">1</span> Introduction</h1>
<p><code>setTheme</code> is the main aesthetic function in recharts. It can</p>
<ul>
<li>set pre-installed themes</li>
<li>set color palette</li>
<li>set misc aesthetic features</li>
</ul>
</div>
<div id="function-call" class="section level1">
<h1><span class="header-section-number">2</span> Function Call</h1>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">setTheme</span>(chart, <span class="dt">theme =</span> <span class="kw">c</span>(<span class="st">&quot;asis&quot;</span>, <span class="st">&quot;default&quot;</span>, <span class="st">&quot;macarons&quot;</span>, <span class="st">&quot;infographic&quot;</span>,
  <span class="st">&quot;blue&quot;</span>, <span class="st">&quot;dark&quot;</span>, <span class="st">&quot;gray&quot;</span>, <span class="st">&quot;green&quot;</span>, <span class="st">&quot;helianthus&quot;</span>, <span class="st">&quot;macarons2&quot;</span>, <span class="st">&quot;mint&quot;</span>, <span class="st">&quot;red&quot;</span>,
  <span class="st">&quot;roma&quot;</span>, <span class="st">&quot;sakura&quot;</span>, <span class="st">&quot;shine&quot;</span>, <span class="st">&quot;vintage&quot;</span>), <span class="dt">palette =</span> <span class="st">&quot;asis&quot;</span>, <span class="dt">bgColor =</span> <span class="ot">NULL</span>,
  <span class="dt">renderAsImage =</span> <span class="ot">FALSE</span>, <span class="dt">calculable =</span> <span class="ot">FALSE</span>, <span class="dt">calculableColor =</span> <span class="ot">NULL</span>,
  <span class="dt">calculableHolderColor =</span> <span class="ot">NULL</span>, <span class="dt">animation =</span> <span class="ot">TRUE</span>, <span class="dt">animationEasing =</span> <span class="ot">NULL</span>,
  <span class="dt">animationDuration =</span> <span class="ot">NULL</span>, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, ...)</code></pre></div>
<table>
<colgroup>
<col width="27%" />
<col width="72%" />
</colgroup>
<thead>
<tr class="header">
<th>Arg</th>
<th>Requirement</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>chart</strong></p></td>
<td><p>Echarts object generated by <code>echartR</code> or <code>echart</code>.</p></td>
</tr>
<tr class="even">
<td><p>theme</p></td>
<td><p>theme name or theme object</p>
<ul>
<li>pre-installed themes
<ul>
<li>‘default’, ‘macarons’, ‘infographic’, ‘blue’, ‘dark’, ‘gray’, ‘green’, ‘helianthus’, ‘macarons2’, ‘mint’, ‘red’, ‘roma’, ‘sakura’, ‘shine’, ‘vintage’</li>
</ul></li>
<li>user-defined themes
<ul>
<li>A list. E.g., <code>list(color=c('#ff7f50',</code> <code>'#87cefa',</code> <code>'#da70d6',</code> <code>'#32cd32',</code> <code>'#6495ed'),</code> <code>title=list(x='left',</code> <code>y='top'),</code> <code>legend=list(orient='horizontal'))</code></li>
</ul></li>
</ul></td>
</tr>
<tr class="odd">
<td><p>palette</p></td>
<td><p>name of the palette or a color vector. Default NULL to get echarts default.</p>
<ul>
<li>‘asis’
<ul>
<li>keep the color palette applied in current echarts object</li>
</ul></li>
<li>Echarts theme palette
<ul>
<li>“_default“,”_macarons“,”_infographic“,”_blue“,”_dark“,”_gray“,”_green“,”_helianthus“,”_macarons2“,”_mint“,”_red“,”_roma“,”_sakura“,”_shine“,”_vintage&quot;</li>
</ul></li>
<li><code>RColorBrewer</code> palettes
<ul>
<li>‘BrBG’, ‘PiYG’, ‘PRGn’, ‘PuOr’, ‘RdBu’, ‘RdGy’, ‘RdYlBu’, ‘RdYlGn’, ‘Spectral’, ‘Accent’, ‘Dark2’, ‘Paired’, ‘Pastel1’, ‘Pastel2’, ‘Set1’, ‘Set2’, ‘Set3’, ‘Blues’, ‘BuGn’, ‘BuPu’, ‘GnBu’, ‘Greens’, ‘Greys’, ‘Oranges’, ‘OrRd’, ‘PuBu’, ‘PuBuGn’, ‘PuRd’, ‘Purples’, ‘RdPu’, ‘Reds’, ‘YlGn’, ‘YlGnBu’, ‘YlOrBr’, ‘YlOrRd’</li>
</ul></li>
<li><code>ggthemes</code> palettes
<ul>
<li>‘calc’, ‘economist’, ‘economist_white’, ‘economist_stata’, ‘excel’, ‘exel_fill’, ‘excel_line’, ‘excel_new’, ‘few’, ‘fivethirtyeight’, ‘538’, ‘manyeyes’, ‘gdocs’, ‘pander’, ‘tableau’, ‘stata’, ‘stata1’,‘stata1r’,‘statamono’, ‘ptol’, ‘tableau20’, ‘tableau10medium’, ‘tableaugray’, ‘tableauprgy’, ‘tableaublrd’, ‘tableaugnor’, ‘tableaucyclic’, ‘tableau10light’, ‘tableaublrd12’, ‘tableauprgy12’, ‘tableaugnor12’,‘hc’,‘darkunica’, ‘solarized’, ‘solarized_red’, ‘solarized_yellow’, ‘solarized_orange’, ‘solarized_magenta’, ‘solarized_violet’, ‘solarized_blue’, ‘solarized_cyan’, ‘solarized_green’, ‘wsj’, ‘wsj_rgby’, ‘wsj_red_green’, ‘wsj_black_green’, ‘wsj_dem_rep’, ‘colorblind’, ‘trafficlight’</li>
</ul></li>
<li>others
<ul>
<li>‘rainbow’, ‘terrain’, ‘topo’, ‘heat’, ‘cm’</li>
</ul></li>
</ul>
<p><strong>Usage</strong></p>
<ul>
<li>If the value is not set, and the function defaults will be loaded</li>
<li>Set <code>palette=NULL</code> to use Echarts defaults</li>
<li>Set <code>palette=palette name</code> to assign any palette listed above</li>
<li>Set <code>palette=palette name(number)</code> to restrict number of colors within the palette (e.g., <code>palette='calc(3)'</code> picks 3 colors out of ‘calc’ RANDOMLY)</li>
<li>Set <code>palette=c(color1, color2, color3, ...)</code> to define a palette vector, made of which either color names or Hex expressions. Use <code>colors()</code> to check available color names and check the effects using <code>demo(colors)</code>.</li>
</ul></td>
</tr>
<tr class="even">
<td><p>bgColor</p></td>
<td><p>Color name/value of the background. Default is transparent (‘rgba(0,0,0,0)’)</p></td>
</tr>
<tr class="odd">
<td><p>renderAsImage</p></td>
<td><p>Logical. If TRUE, the interactive effects are disabled. Default FALSE.</p></td>
</tr>
<tr class="even">
<td><p>calculable</p></td>
<td><p>Logical. If TRUE, the chart is re-calculated after drag. Default FALSE.</p></td>
</tr>
<tr class="odd">
<td><p>calculableColor</p></td>
<td><p>The border color of the tooltip during calculable effect. Default ‘rgba(255,165,0,0.6)’.</p></td>
</tr>
<tr class="even">
<td><p>calculableHolderColor</p></td>
<td><p>The color of calculableHolder. Default ‘#ccc’.</p></td>
</tr>
<tr class="odd">
<td><p>animation</p></td>
<td><p>Logical. If TRUE, the animation is on at initiation. Default TRUE. For IE8, it is recommended to set FALSE.</p></td>
</tr>
<tr class="even">
<td><p>animationEasing</p></td>
<td><p>The slight moving effect of major elements. Default ‘ExponentialOut’. Other choices: ‘Linear’, ‘QuadraticIn’, ‘QuadraticOut’, ‘QuadraticInOut’, ‘CubicIn’, ‘CubicOut’, ‘CubicInOut’, ‘QuarticIn’, ‘QuarticOut’, ‘QuarticInOut’, ‘QuinticIn’, ‘QuinticOut’, ‘QuinticInOut’, ‘SinusoidalIn’, ‘SinusoidalOut’, ‘SinusoidalInOut’, ‘ExponentialIn’, ‘ExponentialInOut’, ‘CircularIn’, ‘CircularOut’, ‘CircularInOut’, ‘ElasticIn’, ‘ElasticOut’, ‘ElasticInOut’, ‘BackIn’, ‘BackOut’, ‘BackInOut’, ‘BounceIn’, ‘BounceOut’, ‘BounceInOut’</p></td>
</tr>
<tr class="odd">
<td><p>animationDuration</p></td>
<td><p>The duration into animation. Default 2000 (ms).</p></td>
</tr>
<tr class="even">
<td><p>width</p></td>
<td><p>Width (px) of the whole chart. Default NULL (auto).</p></td>
</tr>
<tr class="odd">
<td><p>height</p></td>
<td><p>Height (px) of the whole chart. Default NULL (auto).</p></td>
</tr>
<tr class="even">
<td><p>…</p></td>
<td><p>Elipsis</p></td>
</tr>
</tbody>
</table>
<div id="user-defined-theme-udt" class="section level2">
<h2><span class="header-section-number">2.1</span> User-defined Theme (UDT)</h2>
<p>You can design your prefered themes using <a href="http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html" class="uri">http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html</a>.</p>
<p>The UDTs in echarts are JS objects. You can write it in a list form and setTheme will parse it into JSON string for process.</p>
<p>A typical theme JS looks like:</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="op">{</span>
    <span class="dt">color</span><span class="op">:</span> [<span class="st">&#39;#ff7f50&#39;</span><span class="op">,</span><span class="st">&#39;#87cefa&#39;</span><span class="op">,</span><span class="st">&#39;#da70d6&#39;</span><span class="op">,</span><span class="st">&#39;#32cd32&#39;</span><span class="op">,</span><span class="st">&#39;#6495ed&#39;</span>]<span class="op">,</span> 
    <span class="dt">title</span><span class="op">:</span> <span class="op">{</span><span class="dt">x</span><span class="op">:</span> <span class="st">&#39;left&#39;</span><span class="op">,</span> <span class="dt">y</span><span class="op">:</span> <span class="st">&#39;top&#39;</span><span class="op">},</span> 
    <span class="dt">legend</span><span class="op">:</span> <span class="op">{</span><span class="dt">orient</span><span class="op">:</span> <span class="st">&#39;horizontal&#39;</span><span class="op">}</span> 
<span class="op">}</span></code></pre></div>
<p>You should write in the format below:</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">list</span>(
     <span class="dt">color=</span><span class="kw">c</span>(<span class="st">&#39;#ff7f50&#39;</span>,<span class="st">&#39;#87cefa&#39;</span>,<span class="st">&#39;#da70d6&#39;</span>,<span class="st">&#39;#32cd32&#39;</span>,<span class="st">&#39;#6495ed&#39;</span>), 
     <span class="dt">title=</span><span class="kw">list</span>(<span class="dt">x=</span><span class="st">&#39;left&#39;</span>, <span class="dt">y=</span><span class="st">&#39;top&#39;</span>), 
     <span class="dt">legend=</span><span class="kw">list</span>(<span class="dt">orient=</span><span class="st">&#39;horizontal&#39;</span>)
)</code></pre></div>
</div>
</div>
<div id="showcase" class="section level1">
<h1><span class="header-section-number">3</span> Showcase</h1>
<div id="pre-installed-themes" class="section level2">
<h2><span class="header-section-number">3.1</span> Pre-installed Themes</h2>
<div id="default" class="section level3">
<h3><span class="header-section-number">3.1.1</span> default</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g &lt;-<span class="st"> </span><span class="kw">echartr</span>(mtcars, wt, mpg, carb, <span class="dt">weight=</span>hp, <span class="dt">z=</span>am, <span class="dt">type=</span><span class="st">&#39;bubble&#39;</span>) %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">setSymbols</span>(<span class="st">&#39;circle&#39;</span>)
g</code></pre></div>
<div id="htmlwidget-2f474393eee9e2805a8b" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-2f474393eee9e2805a8b">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"]},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="macarons" class="section level3">
<h3><span class="header-section-number">3.1.2</span> macarons</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;macarons&#39;</span>)</code></pre></div>
<div id="htmlwidget-37f5ce9b116596d6781c" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-37f5ce9b116596d6781c">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"macarons"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="infographic" class="section level3">
<h3><span class="header-section-number">3.1.3</span> infographic</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;infographic&#39;</span>)</code></pre></div>
<div id="htmlwidget-2ebe20a18fa71ad7d619" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-2ebe20a18fa71ad7d619">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"infographic"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="blue" class="section level3">
<h3><span class="header-section-number">3.1.4</span> blue</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;blue&#39;</span>)</code></pre></div>
<div id="htmlwidget-8a16d641ea1acb8436e1" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-8a16d641ea1acb8436e1">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"blue"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="dark" class="section level3">
<h3><span class="header-section-number">3.1.5</span> dark</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;dark&#39;</span>)</code></pre></div>
<div id="htmlwidget-91bd99fceefdb9c94b46" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-91bd99fceefdb9c94b46">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"dark"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="gray" class="section level3">
<h3><span class="header-section-number">3.1.6</span> gray</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;gray&#39;</span>)</code></pre></div>
<div id="htmlwidget-ecb57ba743216739b4ee" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-ecb57ba743216739b4ee">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"gray"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="green" class="section level3">
<h3><span class="header-section-number">3.1.7</span> green</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;green&#39;</span>)</code></pre></div>
<div id="htmlwidget-81a157ccb0b1bb906fca" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-81a157ccb0b1bb906fca">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"green"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="helianthus" class="section level3">
<h3><span class="header-section-number">3.1.8</span> helianthus</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;helianthus&#39;</span>)</code></pre></div>
<div id="htmlwidget-dc643321f1365179a3f4" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-dc643321f1365179a3f4">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"helianthus"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="macarons2" class="section level3">
<h3><span class="header-section-number">3.1.9</span> macarons2</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;macarons2&#39;</span>)</code></pre></div>
<div id="htmlwidget-6300b057590a4654e71c" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-6300b057590a4654e71c">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"macarons2"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="mint" class="section level3">
<h3><span class="header-section-number">3.1.10</span> mint</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;mint&#39;</span>)</code></pre></div>
<div id="htmlwidget-8ce914f751730dc8e718" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-8ce914f751730dc8e718">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"mint"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="red" class="section level3">
<h3><span class="header-section-number">3.1.11</span> red</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;red&#39;</span>)</code></pre></div>
<div id="htmlwidget-beb011e0a8d78d3f8ef2" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-beb011e0a8d78d3f8ef2">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"red"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="roma" class="section level3">
<h3><span class="header-section-number">3.1.12</span> roma</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;roma&#39;</span>)</code></pre></div>
<div id="htmlwidget-ad4061a32c68e11af4e8" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-ad4061a32c68e11af4e8">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"roma"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="sakura" class="section level3">
<h3><span class="header-section-number">3.1.13</span> sakura</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;sakura&#39;</span>)</code></pre></div>
<div id="htmlwidget-fb9d411f1d2811f9f609" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-fb9d411f1d2811f9f609">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"sakura"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="shine" class="section level3">
<h3><span class="header-section-number">3.1.14</span> shine</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;shine&#39;</span>)</code></pre></div>
<div id="htmlwidget-ed4213ca21ebf7aa8322" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-ed4213ca21ebf7aa8322">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"shine"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="vintage" class="section level3">
<h3><span class="header-section-number">3.1.15</span> vintage</h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;vintage&#39;</span>)</code></pre></div>
<div id="htmlwidget-7e4c3c1cf53a53d8da41" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-7e4c3c1cf53a53d8da41">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":"vintage"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
</div>
<div id="user-defined-theme" class="section level2">
<h2><span class="header-section-number">3.2</span> User-defined Theme</h2>
<p>Let’s compose a UDT.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">udt &lt;-<span class="st"> </span><span class="kw">list</span>(
    <span class="dt">backgroundColor=</span><span class="st">&quot;#d5e4eb&quot;</span>, <span class="dt">grid=</span><span class="kw">list</span>(<span class="dt">borderWidth=</span><span class="dv">0</span>),
    <span class="dt">categoryAxis=</span><span class="kw">list</span>(<span class="dt">axisLine=</span><span class="kw">list</span>(<span class="dt">lineStyle=</span><span class="kw">list</span>(<span class="dt">width=</span><span class="dv">2</span>)),
                      <span class="dt">splitLine=</span><span class="kw">list</span>(<span class="dt">lineStyle=</span><span class="kw">list</span>(<span class="dt">width=</span><span class="dv">1</span>, <span class="dt">color=</span><span class="st">&#39;white&#39;</span>))),
    <span class="dt">valueAxis=</span><span class="kw">list</span>(<span class="dt">splitLine=</span><span class="kw">list</span>(<span class="dt">lineStyle=</span><span class="kw">list</span>(<span class="dt">width=</span><span class="dv">1</span>, <span class="dt">color=</span><span class="st">&#39;white&#39;</span>)),
                   <span class="dt">axisLine=</span><span class="kw">list</span>(<span class="dt">lineStyle=</span><span class="kw">list</span>(<span class="dt">width=</span><span class="dv">0</span>)))
)
g %&gt;%<span class="st"> </span><span class="kw">setXAxis</span>(<span class="dt">splitLine=</span><span class="kw">list</span>(<span class="dt">show=</span><span class="ot">FALSE</span>)) %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(udt)</code></pre></div>
<div id="htmlwidget-b42eec7108bbf060208b" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-b42eec7108bbf060208b">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":false},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"theme":{"backgroundColor":["#d5e4eb"],"grid":{"borderWidth":[0]},"categoryAxis":{"axisLine":{"lineStyle":{"width":[2]}},"splitLine":{"lineStyle":{"width":[1],"color":["white"]}}},"valueAxis":{"splitLine":{"lineStyle":{"width":[1],"color":["white"]}},"axisLine":{"lineStyle":{"width":[0]}}}}},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="palette" class="section level2">
<h2><span class="header-section-number">3.3</span> Palette</h2>
<div id="theme-palettes" class="section level3">
<h3><span class="header-section-number">3.3.1</span> Theme Palettes</h3>
<p>All the pre-installed theme contain a palette. If you do not apply all the sytles of the theme, you can assign <code>palette='_theme name'</code>. Remember to add a “_&quot; in front of the theme name.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">palette=</span><span class="st">&quot;_dark&quot;</span>)</code></pre></div>
<div id="htmlwidget-9f2c90e8036c1149b7a9" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-9f2c90e8036c1149b7a9">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"color":["#FE8463","#9BCA63","#FAD860","#60C0DD","#0084C6","#D7504B"]},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="rcolorbrewer-palettes" class="section level3">
<h3><span class="header-section-number">3.3.2</span> <code>RColorBrewer</code> Palettes</h3>
<p>You can also assign <code>RColorBrewer</code> palettes: ‘BrBG’, ‘PiYG’, ‘PRGn’, ‘PuOr’, ‘RdBu’, ‘RdGy’, ‘RdYlBu’, ‘RdYlGn’, ‘Spectral’, ‘Accent’, ‘Dark2’, ‘Paired’, ‘Pastel1’, ‘Pastel2’, ‘Set1’, ‘Set2’, ‘Set3’, ‘Blues’, ‘BuGn’, ‘BuPu’, ‘GnBu’, ‘Greens’, ‘Greys’, ‘Oranges’, ‘OrRd’, ‘PuBu’, ‘PuBuGn’, ‘PuRd’, ‘Purples’, ‘RdPu’, ‘Reds’, ‘YlGn’, ‘YlGnBu’, ‘YlOrBr’, ‘YlOrRd’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">palette=</span><span class="st">&#39;PRGn&#39;</span>)</code></pre></div>
<div id="htmlwidget-b0ea4c4e883ae3eb7d93" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-b0ea4c4e883ae3eb7d93">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"color":["#762A83","#AF8DC3","#E7D4E8","#D9F0D3","#7FBF7B","#1B7837"]},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="ggthemes-palettes" class="section level3">
<h3><span class="header-section-number">3.3.3</span> <code>ggthemes</code> Palettes</h3>
<p>You can assign <code>ggthemes</code> palettes: ‘calc’, ‘economist’, ‘economist_white’, ‘economist_stata’, ‘excel’, ‘exel_fill’, ‘excel_line’, ‘excel_new’, ‘few’, ‘fivethirtyeight’, ‘538’, ‘manyeyes’, ‘gdocs’, ‘pander’, ‘tableau’, ‘stata’, ‘stata1’,‘stata1r’,‘statamono’, ‘ptol’, ‘tableau20’, ‘tableau10medium’, ‘tableaugray’, ‘tableauprgy’, ‘tableaublrd’, ‘tableaugnor’, ‘tableaucyclic’, ‘tableau10light’, ‘tableaublrd12’, ‘tableauprgy12’, ‘tableaugnor12’,‘hc’,‘darkunica’, ‘solarized’,‘solarized_red’, ‘solarized_yellow’, ‘solarized_orange’, ‘solarized_magenta’, ‘solarized_violet’, ‘solarized_blue’, ‘solarized_cyan’, ‘solarized_green’, ‘wsj’, ‘wsj_rgby’, ‘wsj_red_green’, ‘wsj_black_green’, ‘wsj_dem_rep’, ‘colorblind’, ‘trafficlight’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">palette=</span><span class="st">&#39;tableau20&#39;</span>)</code></pre></div>
<div id="htmlwidget-c010be2bab27caa0d8a2" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-c010be2bab27caa0d8a2">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"color":["#1F77B4","#AEC7E8","#FF7F0E","#FFBB78","#2CA02C","#98DF8A"]},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="other-palettes" class="section level3">
<h3><span class="header-section-number">3.3.4</span> Other Palettes</h3>
<p>You can assign other palettes: ‘rainbow’, ‘terrain’, ‘topo’, ‘heat’, ‘cm’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">palette=</span><span class="st">&#39;terrain&#39;</span>)</code></pre></div>
<div id="htmlwidget-9c35ed4297c4308c3c30" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-9c35ed4297c4308c3c30">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"color":["#00A600","#63C600","#E6E600","#EAB64E","#EEB99F","#F2F2F2"]},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="user-defined-palettes" class="section level3">
<h3><span class="header-section-number">3.3.5</span> User-defined Palettes</h3>
<p>You can also compose a palette by concatenating a vector of colors yourself. E.g.:</p>
<ul>
<li>c(‘red’, ‘yellow’, ‘green’)</li>
<li>c(‘#FF0000’, ‘#FFFF00’, ‘#00FF00’)</li>
</ul>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">palette=</span><span class="kw">c</span>(
    <span class="st">&#39;red&#39;</span>, <span class="st">&#39;yellow&#39;</span>, <span class="st">&#39;orange&#39;</span>, <span class="st">&#39;limegreen&#39;</span>, <span class="st">&#39;cyan&#39;</span>, <span class="st">&#39;violet&#39;</span>))</code></pre></div>
<div id="htmlwidget-6dc7a2282c71c3695af7" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-6dc7a2282c71c3695af7">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"color":["#FF0000","#FFFF00","#FFA500","#32CD32","#00FFFF","#EE82EE"]},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
</div>
<div id="other-aesthetics" class="section level2">
<h2><span class="header-section-number">3.4</span> Other Aesthetics</h2>
<div id="bgcolor" class="section level3">
<h3><span class="header-section-number">3.4.1</span> <code>bgColor</code></h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">bgColor=</span><span class="st">&#39;darkblue&#39;</span>)</code></pre></div>
<div id="htmlwidget-a0c2bfafe7110a85f484" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-a0c2bfafe7110a85f484">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"backgroundColor":"#00008B"},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="renderasimage" class="section level3">
<h3><span class="header-section-number">3.4.2</span> <code>renderAsImage</code></h3>
<p>Disable the interactive effects.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">renderAsImage=</span><span class="ot">TRUE</span>)</code></pre></div>
<div id="htmlwidget-27fde9a94ba873f40906" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-27fde9a94ba873f40906">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"renderAsImage":true},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="calculable" class="section level3">
<h3><span class="header-section-number">3.4.3</span> <code>calculable</code></h3>
<p>Use pie chart for example. Try dragging a fan away.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(mtcars, am, hp, <span class="dt">type=</span><span class="st">&#39;ring&#39;</span>) %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">setTheme</span>(<span class="dt">calculable=</span><span class="ot">TRUE</span>, <span class="dt">calculableColor=</span><span class="st">&#39;yellow&#39;</span>, 
             <span class="dt">calculableHolderColor=</span><span class="st">&#39;gold&#39;</span>)</code></pre></div>
<div id="htmlwidget-c2ea793f82e26fd1f394" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-c2ea793f82e26fd1f394">{"x":{"series":[{"name":"Proportion","type":"pie","data":[{"name":"0","value":3045,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}},{"name":"1","value":1649,"itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false}}}}],"center":["50%","50%"],"width":"90%","x":"5%","radius":["45%","90%"],"max":3045,"height":"70%","y":"15%","selectedMode":"single","itemStyle":{"normal":{"label":{"show":true}},"emphasis":{"label":{"show":true,"position":"center","textStyle":{"fontSize":"30","fontWeight":"bold"}}}},"clockWise":false}],"xAxis":[{"type":"value","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"{a} <br/>{b} : {c} ({d}%)","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["pie","funnel"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":["0","1"],"x":"left","y":"top","orient":"horizontal"},"calculable":true,"calculableColor":"#FFFF08","calculableHolderColor":"#FFD706"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="animation" class="section level3">
<h3><span class="header-section-number">3.4.4</span> <code>animation</code></h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">animation=</span><span class="ot">TRUE</span>, <span class="dt">animationEasing=</span><span class="st">&#39;BounceInOut&#39;</span>,
               <span class="dt">animationDuration=</span><span class="dv">500</span>)</code></pre></div>
<div id="htmlwidget-777253dee403b4dbe1c5" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-777253dee403b4dbe1c5">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"],"animation":false,"animationEasing":"BounceInOut","animationDuration":500},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="width-and-height" class="section level3">
<h3><span class="header-section-number">3.4.5</span> <code>width</code> And <code>height</code></h3>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="dt">width=</span><span class="dv">400</span>, <span class="dt">height=</span><span class="dv">300</span>)</code></pre></div>
<div id="htmlwidget-72b83ec530667bd41d0d" style="width:400px;height:300px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-72b83ec530667bd41d0d">{"x":{"series":[{"name":"1","type":"scatter","data":[[2.32,22.8,93],[3.215,21.4,110],[3.46,18.1,105],[2.2,32.4,66],[1.835,33.9,65],[2.465,21.5,97],[1.935,27.3,66]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"2","type":"scatter","data":[[3.44,18.7,175],[3.19,24.4,62],[3.15,22.8,95],[1.615,30.4,52],[3.52,15.5,150],[3.435,15.2,150],[3.845,19.2,175],[2.14,26,91],[1.513,30.4,113],[2.78,21.4,109]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"3","type":"scatter","data":[[4.07,16.4,180],[3.73,17.3,180],[3.78,15.2,180]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"4","type":"scatter","data":[[2.62,21,110],[2.875,21,110],[3.57,14.3,245],[3.44,19.2,123],[3.44,17.8,123],[5.25,10.4,205],[5.424,10.4,215],[5.345,14.7,230],[3.84,13.3,245],[3.17,15.8,264]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"6","type":"scatter","data":[[2.77,19.7,175]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"},{"name":"8","type":"scatter","data":[[3.57,15,335]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/52));\n                }"}],"legend":{"show":true,"data":["1","2","3","4","6","8"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["circle","circle","circle","circle","circle","circle"]},"evals":["series.0.symbolSize","series.1.symbolSize","series.2.symbolSize","series.3.symbolSize","series.4.symbolSize","series.5.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
</div>
</div>
<div id="references" class="section level1">
<h1><span class="header-section-number">4</span> References</h1>
<p>theme</p>
<p><a href="http://echarts.baidu.com/echarts2/doc/example/theme.html" class="uri">http://echarts.baidu.com/echarts2/doc/example/theme.html</a></p>
<p>backgroundColor</p>
<p><a href="http://echarts.baidu.com/echarts2/doc/option.html#title~backgroundColor" class="uri">http://echarts.baidu.com/echarts2/doc/option.html#title~backgroundColor</a></p>
<p>colors</p>
<p><a href="http://echarts.baidu.com/echarts2/doc/option.html#title~color" class="uri">http://echarts.baidu.com/echarts2/doc/option.html#title~color</a><br />
<a href="http://colorbrewer2.org" class="uri">http://colorbrewer2.org</a></p>
<p>other features</p>
<p><a href="http://echarts.baidu.com/echarts2/doc/option.html#title~renderAsImage" class="uri">http://echarts.baidu.com/echarts2/doc/option.html#title~renderAsImage</a><br />
<a href="http://echarts.baidu.com/echarts2/doc/option.html#title~calculable" class="uri">http://echarts.baidu.com/echarts2/doc/option.html#title~calculable</a><br />
<a href="http://echarts.baidu.com/echarts2/doc/option.html#title~animation" class="uri">http://echarts.baidu.com/echarts2/doc/option.html#title~animation</a><br />
<a href="http://echarts.baidu.com/echarts2/doc/option.html#title~calculableColor" class="uri">http://echarts.baidu.com/echarts2/doc/option.html#title~calculableColor</a><br />
<a href="http://echarts.baidu.com/echarts2/doc/option.html#title~calculableHolderColor" class="uri">http://echarts.baidu.com/echarts2/doc/option.html#title~calculableHolderColor</a></p>
</div>

<script type="text/javascript">
window.onload = function() {
  var i, fig = 1, caps = document.getElementsByClassName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.className !== 'figure' || cap.nodeName !== 'P')
      continue;
    cap.innerHTML = '<span>Figure ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
  fig = 1;
  caps = document.getElementsByTagName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.nodeName !== 'TABLE') continue;
    cap.innerHTML = '<span>Table ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
}
</script>



</div>

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>
